var vm= new Vue();

/*
*  首页内容
*
**/
//发现
var Find = {
    template: `<div class="find-wrap">
                   <div class="find-header">
                       <ul class="find-nav">
                          <li class="findItem" v-for="(item,index) in findNav" @click="findItem(index)">
                            <span :class="findIndex==index?'findItemActive':'headerspan'">{{item}}</span>
                          </li>
                       </ul>
                   </div>
                   <waterfallsFlow></waterfallsFlow>
               </div>`,
    data() {
        return {
            findIndex: 0,
            findNav: ['推荐', '婚礼', '婚庆', '司仪', '婚车', '蜜月', '旅拍']
        }
    },
    components: {
        'waterfallsFlow': waterfallsFlow
    },
    methods: {
        findItem: function (index) {
            this.findIndex = index
        }
    }
}

//发现详情
var FindDetails = {
    template: `<div class="details-wrap">
                    <el-carousel :height="imgHeight">
                      <el-carousel-item v-for="item in carousel" :key="item">
                         <img ref="imgHeight" class="carouselImg" :src="item" alt="">
                      </el-carousel-item>
                    </el-carousel>
                    <div class="info">
                        <div>
                            <img class="infoImg" :src="info.img" alt="">
                            <span class="username">{{info.username}}</span>
                         </div>
                        <button v-if="info.isattention" class="attentionBtn" @click="attentionBtn">+关注</button>
                        <button v-else class="attentionBtn" @click="attentionBtn">取消关注</button>
                    </div>
                    <div class="infoDetails">
                       <P class="infoSignature">{{info.signature}}</P>
                       <p class="signatureCom">{{info.signature}}</p>
                       <div>
                         <span class="infoTime">{{info.infoTime}}</span>
                         <p class="commentZan">
                          <span>{{info.keep}}收藏</span>
                          <span style="margin-left: .2rem">{{info.zan}}点赞</span>
                         </p>
                       </div>
                    </div>
                    <div class="comment">
                        <ul class="comment-wrap">
                           <li class="commentLi" v-for="item in comment">
                              <img class="commentImg" :src="item.img" alt="">
                               <div class="coment-com">
                                  <p class="userComment">{{item.userComment}}</p>
                                  <p class="commentCom">{{item.commentCom}}</p>
                                  <p class="commentData">{{item.commentData}}</p>
                                  <ul>
                                    <li class="commentLi" v-for="r in item.reply">
                                         <img class="commentImg" :src="item.img" alt="">
                                         <div class="coment-com">
                                              <p class="userComment">
                                                <span>{{r.userComment}}</span>
                                                <span style="color: #333;">回复</span>
                                                <span>{{item.userComment}}</span>
                                               </p>
                                              <p class="commentCom">{{r.commentCom}}</p>
                                              <p class="commentData">{{r.commentData}}</p>
                                         </div>
                                     </li>
                                 </ul>
                               </div>
                           </li>
                        </ul>
                     </div>
                     <p class="seeAll">查看全部88条评论</p>
                     <div class="Popular">
                        <p class="PopularTitle">
                           <span class="titleText">热门日记</span>
                        </p>
                        <!--瀑布流-->
                        <flow></flow>
                      </div>
                      <div class="slider">
                          <div class="slider-home" @click="goHome">
                             <img class="sliderIcon" src="./images/silder-home.png" alt="">
                             <span>首页</span>
                          </div>
                          <div class="slider-share">
                             <img class="sliderIcon" src="./images/silder-share.png" alt="">
                             <span>分享</span>
                          </div>
                          <div class="slider-footer">
                                <div v-if="ispl" class="slider-box">
                                    <div class="slider-footer-list" @click="sliderzan">
                                        <img v-if="iszan" src="./images/silder-zan2.png" alt="">
                                        <img v-else src="./images/silder-zan.png" alt="">
                                        <span>点赞&nbsp;{{zan}}</span>
                                     </div>
                                     <div class="slider-footer-list" @click="sliderpl">
                                        <img src="./images/slider-pl.png" alt="">
                                        <span>评论&nbsp;{{pl}}</span>
                                     </div>
                                     <div class="slider-footer-list" @click="slidersc(0)">
                                        <img v-if="issc" class="silder-sc" src="./images/silder-sc2.png" alt="">
                                        <img v-else class="silder-sc" src="./images/silder-sc.png" alt="">
                                        <span>收藏&nbsp;{{sc}}</span>
                                     </div>
                               </div>
                              <div v-else class="commentInput">
                                 <input autofocus type="text" placeholder="输入你的评论">
                                 <button type="button" class="commentsend" @click="commentsend">发送</button>
                              </div>
                          </div>
                      </div>
               </div>`,
    data() {
        return {
            imgHeight: null,
            carousel: [
                "./images/flow1.png",
                "./images/flow2.png",
                "./images/flow4.png",
            ],
            info: {
                img: "./images/userImg.png",
                username: '时尚前沿',
                isattention: false,
                signature: '梦幻巴黎婚礼梦幻巴黎婚礼梦幻巴黎婚礼梦幻巴黎婚礼梦幻巴黎婚礼',
                signature2: '梦幻巴黎婚礼梦幻巴黎婚礼梦幻巴黎婚礼梦幻巴黎婚礼梦幻巴黎婚礼',
                infoTime: "2018-11-10",
                zan: "1",
                keep: "2"
            },
            comment: [
                {
                    img: "./images/userImg.png",
                    userComment: "此乃用户",
                    commentCom: "好好看",
                    commentData: "8102-11-23",
                    reply: [
                        {
                            img: "./images/userImg.png",
                            userComment: "此乃昵称",
                            commentCom: "好好看",
                            commentData: "8102-11-23",
                        }
                    ]
                }
            ],
            zan: 0,
            iszan: true,
            pl: 0,
            ispl: true,
            sc: 0,
            issc: true,
        }
    },
    components: {
        'flow': waterfallsFlow
    },
    mounted() {
        //this.imgHeight="300px";
        var that = this;
        window.onresize = function temp() {
            //that.imgHeight = h;
            // 通过点语法获取img的height属性值
            that.imgHeight = that.$refs.imgHeight['0'].height + "px";
        }
    },
    methods: {
        //关注
        attentionBtn: function (index) {
            if (!this.info.isattention) {
                this.info.isattention = !this.info.isattention
            } else {
                this.info.isattention = !this.info.isattention
            }
        },
        //点赞
        sliderzan: function () {
            this.zan = this.iszan ? this.zan + 1 : this.zan - 1;
            this.iszan = !this.iszan;
        },
        //收藏
        slidersc: function () {
            this.sc = this.issc ? this.sc + 1 : this.sc - 1;
            this.issc = !this.issc;
        },
        //评论
        sliderpl: function () {
            this.ispl = !this.ispl
        },
        //发送
        commentsend: function () {
            this.ispl = !this.ispl
        },
        goHome:function () {
            this.$router.push("/")
            console.log('去首页')
        }
    }
}


//附近
var Nearby = {
    template: `<div class="nearby-wrap">
                    <waterfallsFlow></waterfallsFlow>
               </div>`,
    components: {
        'waterfallsFlow': waterfallsFlow
    },
}
/*
  关注
*/
var Attention = {
    template: `<div >
                   <div class="attention-wrap">
                       <ul class="attention-ul" v-if="appear">
                          <li @click="attentionDetails" v-for="item in attention">
                              <div class="attentionImg">
                                 <img :src="item.img" alt="">
                              </div>
                              <p class="position">{{item.position}}</p>
                              <p class="advisory">{{item.advisory}}</p>
                              <p class="fanNumDiary">
                                <span>{{item.fanNum}}粉丝</span>
                                <span>{{item.diary}}日记</span>
                              </p>
                          </li>
                       </ul>
                   </div>
                  <!--未关注展示-->
                   <div v-if="attention<=0" class="not">
                      <div class="notImg">
                         <img src="./images/not.png" alt="">
                      </div>
                      <p>你还没有关注的好友</p>
                      <p>关注后你可以在关注页面中看到关注对象</p>
                  </div>
                    <router-view></router-view>
               </div>`,
    data() {
        return {
            appear:true,
            attention: [
                {
                    img: "./images/flow1.png",
                    position: '婚礼策划师',
                    advisory: "梦幻巴黎婚礼",
                    fanNum: 2,
                    diary: 2,
                },
                {
                    img: "./images/flow1.png",
                    position: '婚礼策划师',
                    advisory: "梦幻巴黎婚礼",
                    fanNum: 2,
                    diary: 2,
                },
                {
                    img: "./images/flow1.png",
                    position: '婚礼策划师',
                    advisory: "梦幻巴黎婚礼",
                    fanNum: 2,
                    diary: 2,
                },
                {
                    img: "./images/flow1.png",
                    position: '婚礼策划师',
                    advisory: "梦幻巴黎婚礼",
                    fanNum: 2,
                    diary: 2,
                }
            ]
        }
    },
    methods: {
        attentionDetails: function () {
           this.$router.push("/attention/details");
                console.log(this.$router)
           //vm.$emit('showpublic', {type: 'tabbar'})
        }
    },
}
/*
*   关注详情
*/
var AttentionDetails = {
    template: `<div>
                  <div class="detailsWrap2">
                      <img class="bg" :src="bg" alt="">
                      <div class="detailsBox">
                           <div class="detailsUser">
                              <img :src="detailsUser" alt="">
                           </div>  
                           <p class="detailsName">{{detailsName}}</p>
                           <div class="details-box2">
                              <div class="details-list">
                                 <p>{{gz}}</p>
                                 <p>关注</p>
                               </div>
                              <div class="details-list">
                                   <p>{{fs}}</p>
                                   <p>粉丝</p> 
                              </div>
                              <div class="details-list">
                                    <p>{{zasc}}</p>
                                    <p>获赞与收藏</p> 
                              </div>
                           </div>
                      </div>
                  </div>
                  <div class="details-header2">
                      <button v-if="isAttention" class="detail-Attention" @click="addAttention">取消关注</button>
                       <button v-else class="detail-Attention2" @click="addAttention">+关注</button>
                      <p class="details-region">
                        <span class="region">江苏南京</span>
                      </p>
                      <p class="details-signature">想留不能留才最寂寞</p>
                   </div>
                   <div>
                   <p class="details-content">
                       <span class="conTitle">日记</span>
                       <span class="num">12</span>
                   </p>
                 </div>
                  <!--瀑布流-->
                  <flow></flow>
               </div>`,
    data() {
        return {
            bg: "./images/flow2.png",
            detailsUser: "./images/flow2.png",
            detailsName: '还是我',
            gz: 22,
            fs: 22,
            zasc: 2222,
            isAttention: true,
        }
    },
    components: {
        'flow': waterfallsFlow
    },
    methods: {
        addAttention: function () {
            this.isAttention = !this.isAttention
        }
    }
}


//首页
var Index = {
    template: `<div class="home-nav" v-if="appear">
                  <div class="temp"></div>
                  <ul class="header-ul" >
                      <router-link tag="li" v-for="(item,index) in navArr" :to="item.href" @click.native="headerNav(index)">
                          <span :class="navIndex==index?'tabbarActive':'headerspan'">{{item.navitem}}</span>
                      </router-link>
                  </ul>
                  <search :is-show="0"></search>
                  <router-view></router-view>
               </div>`,
    data() {
        return {
            appear:true,
            navIndex: 1,
            navArr: [{
                navitem: "关注",
                href: "/attention"
            }, {
                navitem: "发现",
                href: "/find"
            }, {
                navitem: "附近",
                href: "/nearby"
            }],
            issearch: false
        }
    },
    components: {
        'search': Search
    },
    mounted:function () {
        var _that = this;
        vm.$on("showpublic",function(data){
            console.log(data.type)
            if(data.type=="tabbar"){
                console.log(data.type)
                _that.appear = false
            }
        })
    },
    methods: {
        headerNav: function (index) {
            this.navIndex = index
        },
    }
}

/*
* 发布
* */
var Release = {
    template: `<div>
                  <h4>发布</h4>
               </div>`
}
/*
* 我的
* */
var Mypage =  {
    template: `<div>
                  <div class="my-page">
                      <img class="my-bg" :src="myUser" alt="">
                      <div class="my-wrap">
                           <div class="myUser">
                              <img :src="myUser" alt="">
                           </div>  
                           <p class="myName">{{detailsName}}</p>
                           <div class="my-box">
                              <div class="my-list">
                                 <p>{{gz}}</p>
                                 <p>关注</p>
                               </div>
                              <div class="my-list">
                                   <p>{{fs}}</p>
                                   <p>粉丝</p> 
                              </div>
                              <div class="my-list">
                                    <p>{{zasc}}</p>
                                    <p>获赞与收藏</p> 
                              </div>
                           </div>
                           <div class="fileBg">
                              <img src="./images/mybg.png" alt="">
                              <input type="file" size="20">
                           </div>
                      </div>
                  </div>
                  <div class="my-header">
                      <button class="my-Attention" @click="edit">编辑个人资料</button>
                      <p class="my-region-box">
                        <span class="my-region">江苏南京</span>
                      </p>
                      <p class="my-signature">想留不能留才最寂寞</p>
                   </div>
                   <div>
                   <div class="my-content">
                       <span class="my-conTitle">日记</span>
                       <span class="my-num">12</span>
                       <p class="my-group"> 
                          <button @click="chooseType(0)" type="button" class="istype==0?'chooseActive':''">全部</button>
                          <button @click="chooseType(1)" type="button" class="istype==1?'chooseActive':''">公开</button>
                          <button @click="chooseType(2)" type="button" class="istype==2?'chooseActive':''">私密</button>
                        </p>
                   </div>
                 </div>
                  <!--瀑布流-->
                  <flow></flow>
               </div>`,
    data() {
        return {
            myUser: "./images/flow2.png",
            detailsUser: "./images/flow2.png",
            detailsName: '还是我',
            gz: 22,
            fs: 22,
            zasc: 2222,
            istype:-1,
        }
    },
    components: {
        'flow': waterfallsFlow
    },
    methods: {
        chooseType:function (i) {
            console.log(i)
             this.istype = i
        },
        edit: function () {

        }
    }
}

//编辑资料
var Edit = {
    template:`<div>
                <mt-field label="名字" placeholder="请输入你的姓名" v-model="username"></mt-field>
              </div>`,
    data(){
        return {
            username:''
        }
    },
    methods:{

    }
}